<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子合同申请</title>

    <!--引入本地 element-ui 的样式，-->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>


</head>
<body style="padding: 20px;">

    <div id="app">
        <div id="printMe" class="box" style="padding: 0 60px;font-family: fangsong;">
            <!-- 存根 -->
            <div
                    :style="index==0?'border-bottom: 1px dashed #000':'padding-top:30px'"
                    v-for="(item,index) in 2"
                    :key="index"
            >
                <div
                        style="
              display: flex;
              justify-content: space-between;
              font-weight: 700;
              font-size: 18px;
            "
                >
                    <div v-if="index==0">存根</div>
                    <div v-else></div>
                    <div>NO：{{formData.aic001Str}}</div>
                </div>
                <div
                        style="
              text-align: center;
              font-size: 24px;
              letter-spacing: 40px;
              margin: 10px;
            "
                >
                    证明
                </div>
                <div style="line-height:50px;font-size:18px;">{{ name }}：</div>

                <div style="line-height:35px;font-size:18px;">
                    <div style="display: inline-block;text-indent: 2em;" contenteditable="true">
                        {{formData.aac003}}({{formData.aac002}})因患<span style="display: inline-block;padding: 0 2px;"></span>{{formData.kna001}}
                        <span style="display: inline-block;padding: 0 2px;"></span>病，{{formData.aae001}}年，{{formData.kna002}}
                        医院住院（门诊）治疗共发生医疗费{{formData.kna003}}元，油田以外报销{{formData.kna004}}元
                        （大写：{{formData.kna004_up}}），油田企业补充医疗报销{{formData.kna005}}元（大写：{{formData.kna005_up}}），
                        个人自费金额{{formData.kna006}}元（大写：{{formData.kna006_up}}）元。
                    </div>


                </div>

                <div style="padding-left:80px;line-height:50px;font-size:18px;">
                    特此证明。
                </div>
                <div style="line-height: 50px; text-align: right;font-size:18px;">
                    公共事务中心医疗保险中心
                </div>
                <div style="line-height: 50px; text-align: right" :style="index==0?'margin-bottom:30px;':''">
                    {{formData.aae035Str}}
                </div>
            </div>

        </div>
    </div>

    <script>

        var vm = new Vue({
           el:"#app",
            data() {
                return {
                    name: "保险公司",
                    formData:{},
                    parmsData:{},
                    id:"",
                };
            },
            created(){
               this.parmsData = getParams();
               this.id = this.parmsData.id;
               if(this.parmsData.zmlx == "2"){
                   this.name = "工会";
               }else if(this.parmsData.zmlx == "3"){
                   this.name = "社区";
               }
               this.getData();
            },
            methods: {
                printHtml(){
                    $("#printMe").print();
                },
                //   获取表格数据
                async getData() {
                    console.log("我是子组件方法");
                    const params = {
                        aic001: this.id,
                    };
                    const res = await api.queryBody(
                        "/admin/api/cfrc/CertificateController/getPrintData",
                        params
                    );
                    if (res.code == 1) {
                        this.formData = res.data;
                        console.log(this.formData);
                    } else {
                        this.$message.error(res.msg);
                    }
                },
                //   打印方法
                goPrint() {
                    // printJS({
                    //   printable: "printMe", //所有数据
                    //   properties: [
                    //     { field: "PatientName", displayName: "姓名" }, // 数据字段 表格头名
                    //     { field: "Patient.PATIENT_ID", displayName: "病历号" },
                    //     { field: "Patient.GENDER", displayName: "性别" },
                    //     { field: "Patient.PHONE", displayName: "联系方式" },
                    //     { field: "OperType", displayName: "术式" },
                    //     { field: "TimeStr", displayName: "时间段" },
                    //     { field: "AppDoctorName", displayName: "手术医生" },
                    //     { field: "AlreadyPay", displayName: "是否确费" },
                    //     { field: "DistributeDrugs", displayName: "是否发药" },
                    //   ],
                    //   type: "json",
                    //   gridHeaderStyle: "border: 1px solid #909399;", //表格头样式
                    //   gridStyle: "border: 1px solid #909399; text-align:center;", // 表哥体样式
                    //   // style:'@media print{@page {size:landscape}}' //横行打印
                    // });
                    printJS({
                        printable: "printMe",
                        type: "html",
                        // properties: [
                        //    { field: 'name', displayName: '姓名', columnSize:`50%`},
                        //    { field: 'sex', displayName: '性别',columnSize:`50%`},
                        // ],
                        // header: `<div style="font-size:30px;text-align:center;"> 玉门油田企业员工补充医疗保险结算单 </div>`,
                        // @media print{@page {size:landscape}} 横向打印 portrait 纵向
                        style: "@media print{@page {size:portrait}}",
                        // gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
                        // gridStyle:'line-height:50px;',
                        // repeatTableHeader: true,
                        scanStyles: false,
                        targetStyles: ["*"],
                        ignoreElements: ["no-print"],
                    });
                },
                // 关闭窗口
                handleClose() {
                    this.remoteClose();
                },
            },
        });

        function setData(data){
            vm.formData = data;
        }
    </script>
</body>
</html>